<!doctype html>
<html>
<head>
	<!--
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<script src="{{ url_for('static',filename='js/main.js') }}"></script>

<style type="text/css">
    .talk_con {
      width: 350px;
      height: 440px;
      border: 1px solid #666;
      margin: 15px auto 0;
      background: #f9f9f9;
    }
 
    .talk_show {
      width: 320px;
      height: 360px;
      border: 1px solid #666;
      background: #fff;
      margin: 10px auto 0;
      overflow: auto;
    }
 
    .talk_input {
      width: 320px;
      margin: 10px auto 0;
    }
 
    .whotalk {
      width: 80px;
      height: 30px;
      float: left;
      outline: none;
    }
 
    .talk_word {
      width: 221px;
      height: 26px;
      padding: 0px;
      float: left;
      margin-left: 10px;
      outline: none;
      text-indent: 10px;
    }
 
    .talk_sub {
      width: 56px;
      height: 30px;
      float: left;
      margin-left: 10px;
    }
 
    .atalk {
      margin: 10px;
    }
 
    .atalk span {
      display: inline-block;
      background: #0181cc;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
 
    .btalk {
      margin: 10px;
      text-align: right;
    }
 
    .btalk span {
      display: inline-block;
      background: #ef8201;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
  </style>

</head>

<body>
	<div class="alldiv">
			<div class="left_navigation" id="left_nav">
				
			</div>
			<script>
				$(left_nav).load('/Public/leftNav')
			</script>

		<div class="righthtml" >

			<img src="{{ url_for('static',filename='image/banner.png') }}" width="100%" height="200">
			<h2>THIS IS COMMUNICATION PAGE :).</h2>

			<div class="mine_center">
				<div class="mine_center_left">
					<div class="center_left_bottom">
						<table class="table table-striped">
							<caption><center>Personal contact information</center></caption>
							<thead class="thead-dark">
								<tr>
								<th scope="col">E-mail</th>
								<th scope="col">TEL</th>
                                <td><button onclick="editdoccom({{docinfo[0][0]}})">Modify</button></td>
								</tr>
							</thead>
							<tbody>
								{% for row in docinfo %}
								<tr>
									<!-- <td>{{row}}</td> -->
									<td>{{ row[1] }}</td>
									<td>{{ row[2] }}</td>
								</tr>
								{% endfor %}
							</tbody>

							
    					</table>
                    </br>
                        <table class="table table-striped">
							<caption><center>Doctor contact Info</center></caption>
							<thead class="thead-dark">
								<tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">E-mail</th>
                                    <th scope="col">TEL</th>

								</tr>
							</thead>
							<tbody>
								{% for row in data %}
								<tr>
									<!-- <td>{{row}}</td> -->
									<td>{{ row[0] }}</td>
									<td>{{ row[1] }}</td>
                                    <td>{{ row[2] }}</td>
                                    <td>{{ row[3] }}</td>
								</tr>
								{% endfor %}
							</tbody>

							
    					</table>
					</div>
				</div>
				<div class="mine_center_right" id ="mcr">
					<!--
					<table class="table table-striped">
                        <caption><center>Message Board</center></caption>
                        <span style="margin-left: 10px;margin-top: 12px;">Patient ID:</span><span id="pid" > </span>
                        <span style="margin-left: 10px;margin-top: 12px;">NAME:</span><span id="pname" > </span>
                        <button onclick="addm()" type="button" class="btn btn-danger" style="float: right;margin-right: 10px;margin-top: 10px;">Add</button>
                    	</br>
                        <span style="margin-left: 10px;margin-top: 12px;">E-mail:</span><span id="email" > </span>
                        <span style="margin-left: 10px;margin-top: 12px;">TEL:</span><span id="tel" > </span>

                        <thead class="thead-dark">
                            <tr>
                            <th scope="col">Medication</th>
                            <th scope="col">Take Time</th>
                            <th scope="col">Operation</th>

                            </tr>
                        </thead>
                        <tbody id="mbody">
                        </tbody>

                        
                    </table>
					-->
					<p style="margin-left: 150px;margin-top: 10px;">Message Board</p>
					<div class="talk_con">
						
						<div class="talk_show" id="words">
							{% for mess in chatinfo %}
							{% if mess[1] == 'p'%}
							<div class="btalk"><span>{{mess[0]}}</span></div>
							{% endif %}
							{% if mess[1] == 'd'%}
							<div class="atalk"><span>Doctor:{{mess[0]}}</span></div>
							{% endif %}
							{% endfor %}
						</div>
						<div class="talk_input">
						  <input type="text" class="talk_word" id="talkwords">
						  <input type="button" value="Send" class="talk_sub" id="talksub">
						</div>
					  </div>

				</div>
				
			</div>
		</div>

		<div class="modal fade" id="editMecationModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
			  <div class="modal-content">
				<div class="modal-header">
				  <h5 class="modal-title" id="createFileTitle">Modify Medication</h5>
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				  </button>
				</div>
				<div class="modal-body">
				  <form>
					<div class="form-group">
					  <label for="editMedication" class="col-form-label">E-mail</label>
					  <input type="text" autofocus class="form-control" id="editMedication">
					  <label for="editTakeTime" class="col-form-label">TEL</label>
					  <input type="text" autofocus class="form-control" id="editTakeTime">
					</div>
				  </form>
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-primary" id="submitEdit">Submit</button>
				  <button type="button" class="btn btn-danger" id="cancelEdit">Cancel</button>
				</div>
			  </div>
			</div>
		  </div>

	</div>
	<script>

var tempPatientId=''
var tempDoctorId = ''
var tempPatientName=''
var tempMedicationName =''
var tempMedicationId=''
var modalType = ''
var ppid = ''

		function logout(){
			$.ajax({
					url: "/VitalSigns/logout", 
					type: "POST",  
					data: {
					},
					success: function (result) {
						if (result.message == "success!") {
						
							alert("Logout！");
							location.href="/Login/";
						}
						else {
							alert(result.message)
						}
					}
				});
		}
		function editdocco(id){
			tempDoctorId = id
			
			$.ajax({
					url: "/Doctor/modifycom", 
					type: "POST",  
					data: {"id": id
					},
					success: function (result) {
						if (result.message == "success!") {
							$("#mbody").empty()
							$('#pid').text(id)
							$('#pname').text(name)
							$('#email').text(result.comm[0][0])
							$('#tel').text(result.comm[0][1])
	
							for(i=0;i<result.data.length;i++){
								addtableitem(id,result.data[i], name)
							}
							//display mbody
							$("#mcr").hide
	
							var mcr=document.getElementById("mcr");
							//mcr.setAttribute("hidden",false);
							mcr.removeAttribute("hidden");
						}
						else {
							alert(result.message)
						}
					}
				});
		}
		function editdoccom(id){
			tempDoctorId = id
			modalType = "modify"
			ShowCreateModal()
		}
	
		function addtableitem(pid,item, pname){
			tempPatientId = pid
			//item[0]：药品记录id  item[1]：药品名字 item[2]：吃药时间  name:病人名字
			$("#mbody").append("<tr><td>"+ item[1] +"</td><td>"+item[2] +"</td>"+
				"<td><button style=\" padding:0px; margin:2px;\" onclick=\"modify("+pid +","+item[0]+",'"+pname+"')\">Modify</button>"+
					"<button style=\" padding:0px; margin:2px;\" onclick=\"deletem("+pid +","+item[0]+",'"+pname+"')\">Delete</button></td></tr>")
		}
		function modify(pid,mid,pname){
			tempMedicationId = mid
			tempPatientName =pname
			tempPatientId =pid
			modalType = "modify"
			ShowCreateModal()
		}
		function deletem(pid,mid,pname){
			$.ajax({
					url: "/Doctor/deletem", 
					type: "POST",  
					data: {"id":mid
					},
					success: function (result) {
						if (result.message == "success!") {
						
							//alert("delete success！");
							//editmedication(id,name); 错的，这里的id时药品的id,不是病人的id,搞混了
	
							editmedication(pid,pname);
						}
						else {
							alert(result.message)
						}
					}
				});
		}
	
	
		// 修改弹出框的title, 显示弹框
		function ShowCreateModal(){
			$("#createFileTitle").text('Edit Contact Info');
			$('#editMecationModal').modal('show');
		}
		// 关闭弹框， 获取输入值，然后执行逻辑
		$("#submitEdit").click(function (){
			$("#editMecationModal").modal("hide");
			var inputEditMedication = $("#editMedication").val();
			var inputEditTakeTime = $("#editTakeTime").val();
			console.log(inputEditMedication+" , " + inputEditTakeTime);
	
			if (modalType == "modify"){
				modifymodal(inputEditMedication, inputEditTakeTime)
			}
			if (modalType == "add"){
				addmodal(inputEditMedication, inputEditTakeTime)
			}
			$("#editMedication").val('')
			$("#editTakeTime").val('')
			
	
		});
		$("#cancelEdit").click(function (){
			$("#editMecationModal").modal("hide");
		});
		
		function addm(){
			modalType = "add"
			ShowCreateModal()
		}
	
		function modifymodal(inputEditMedication, inputEditTakeTime){
			$.ajax({
						url: "/Communication/modifycom", 
						type: "POST",  
						data: {"id":tempDoctorId,
						'email':inputEditMedication,
						'tel':inputEditTakeTime
						},
						success: function (result) {
							if (result.message == "success!") {
								alert("Modify contact info success！");
								location.href="/Communication";
							}
							else {
								alert(result.message)
							}
						}
					});
		}
	
		function addmodal(inputEditMedication, inputEditTakeTime){
			console.log("tempPatientId:",tempPatientId)
			$.ajax({
						url: "/Doctor/addm", 
						type: "POST",  
						data: {"id":tempPatientId,
						'name':inputEditMedication,
						'time':inputEditTakeTime
						},
						success: function (result) {
							if (result.message == "success!") {
								alert("Add medication success！");
								editmedication(tempPatientId,tempPatientName);
							}
							else {
								alert(result.message)
							}
						}
					});
		}

		$('#talksub').click(function(){
			//发送单击，获取用户输入的数据value属性值
			var vals=$('#talkwords').val()
			//如果输入的数据为空，则弹窗提示
			if (vals=='')
			{
			  alert('Please input something！')
			  return
			}
			var str=""
			str='<div class="btalk"><span>'+ vals+'</span></div>'
			
			//原有的内容+str,否则会覆盖掉原有内容
			$('#words').html($('#words').html()+str)
			//发送完数据后清空输入框
			$('#talkwords').val('')

			$.ajax({
				url: "/Communication/sendmss", 
				type: "POST",  
				data: {
						"mes": vals
				},
				success: function (result) {
					if (result.message == "success!") {
						
					}
					else {
						alert(result.message)
					}
				}
			});

		  })

		  function displayhis(his) {
			if (his[1]=='p'){
			  str='<div class="atalk"><span>Patient：'+ his[0]+'</span></div>'
			}
			else{
			  str='<div class="btalk"><span>'+ his[0]+'</span></div>'
			}
			$('#words').html($('#words').html()+str)
		  }

		
	</script>
</body>
</html>